<template>
  <div>
    <div id="sankeyCharts"></div>
  </div>
</template>
 
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    let sankeyCharts = echarts.init(document.getElementById("sankeyCharts"));

    let option = {
      series: {
        type: "sankey",
        layout: "none",
        emphasis: {
          focus: "adjacency"
        },
        data: [
          {
            name: "a"
          },
          {
            name: "b"
          },
          {
            name: "a1"
          },
          {
            name: "a2"
          },
          {
            name: "b1"
          },
          {
            name: "c"
          }
        ],
        links: [
          {
            source: "a",
            target: "a1",
            value: 5
          },
          {
            source: "a",
            target: "a2",
            value: 3
          },
          {
            source: "b",
            target: "b1",
            value: 8
          },
          {
            source: "a",
            target: "b1",
            value: 3
          },
          {
            source: "b1",
            target: "a1",
            value: 1
          },
          {
            source: "b1",
            target: "c",
            value: 2
          }
        ]
      }
    };

    sankeyCharts.setOption(option);
  },
  methods: {},
  watch: {},
  created() {}
};
</script>

<style scoped>
/* h2{
    text-align: center;
    padding: 10px;
    font-size: 18px;
  } */
#sankeyCharts {
  width: 100%;
  height: 700px;
  /* border: 1px solid red; */
  margin: 0 auto;
}
</style>
